<template>
  <j-modal
    :title="title"
    :width="500"
    :visible="visibleOne"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <div class="json_box">
      <div class="row">
        <div class="col">
          <div class="label">接口标记：</div>
          <div class="value">{{ data.interfaceTag }}</div>
        </div>
        <div class="col">
          <div class="label">请求次数：</div>
          <div class="value">{{ data.reqCount||0 }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">开始时间：</div>
          <div class="value">{{ data.startDate||'--' }}</div>
        </div>
        <div class="col">
          <div class="label">结束时间：</div>
          <div class="value">{{ data.endDate||'--' }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">成功次数：</div>
          <div class="value">{{ data.reqSuccessCount||0 }}</div>
        </div>
        <div class="col">
          <div class="label">成功率：</div>
          <div class="value">{{ data.reqSuccessRate||'0%' }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">失败次数：</div>
          <div class="value">{{ data.reqFailCount||0 }}</div>
        </div>
        <div class="col">
          <div class="label">失败率：</div>
          <div class="value">{{ data.reqFailRate||'0%' }}</div>
        </div>
      </div>

    </div>

  </j-modal>
</template>

<script>
export default {
  name: 'carModelListModel',
  props: {
    data: {
      type: Object,
      default: () => {
      }
    },
    visibleOne: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      title: '接口统计'
    }
  },
  components: {},
  created() {

  },
  methods: {
    handleCancel() {
      this.visible = false
      this.$emit('update:visibleOne', false)
    }
  }
}
</script>

<style lang="less" scoped>
.json_box {
  .row {
    width: 100%;
    display: flex;

    .col {
      width: 100%;
      display: flex;
      padding:5px 0px;
      .label{
        width:30%;
        text-align:right;
      }
    }
  }
}
</style>